<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .uplaod{
            width: 100px;
            height: 100px;
            font-size: 13px;
            line-height: 100px;
            text-align: center;
            border: 1px dotted red;
        }
    </style>
</head>
<body>
    <!-- 上传文件的请求头必须为 multipart/form-data -->
    <form action="/upload" method="post" enctype="multipart/form-data">
        <input type="file" name="myfile">
        <button>上传</button>
    </form>

    <h3>ajax上传文件</h3>
    <!-- <div class="uplaod" onclick="clickAdd()">
        +
    </div> -->
    <input type="file" id="photo">
    <video src="" controls width="600" height="400"></video>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<script>
   $("#photo").change((e)=>{
        console.log(e)
        // 获取文件对象信息
        let file = e.target.files[0];
        console.log(file)
        // 上传文件必须将文件对象信息存放到FromData对象中
        // 创建FromData对象
        let data = new FormData();
        console.log(data)
        // 向fromdata对象中添加属性 参数一属性名参数二属性值
        data.append("photo",file);
        // 发送ajax请求上传文件
        $.ajax({
            url:"/ajax/upload",
            method:"post",
            data:data,
            // 设置ajax不能被更改
            processData:false,
            // 阻止ajax设置请求内容类型
            contentType:false,
            success(res){
                console.log(res)
                document.querySelector("video").setAttribute("src",res.url);
            }
        })
   })
//    function clickAdd(){
//         let inputfile = document.querySelector("#photo");
//         console.dir(inputfile)
//         inputfile.click();
//    }
</script>
</html>